<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vert.cj 静态文件服务 V2 演示</title>
    <link rel="stylesheet" href="/styles.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>🚀 Vert.cj 静态文件服务 V2</h1>
            <p>基于仓颉标准库API的生产级静态文件服务</p>
        </header>
        
        <main>
            <section class="features">
                <h2>✨ 功能特性</h2>
                <ul>
                    <li>🗂️ 完整的MIME类型支持</li>
                    <li>💾 智能文件缓存机制</li>
                    <li>🔒 安全路径验证</li>
                    <li>⚡ ETag支持和条件请求</li>
                    <li>📁 目录索引文件支持</li>
                    <li>🛡️ 防路径遍历攻击</li>
                </ul>
            </section>
            
            <section class="demo">
                <h2>🧪 演示功能</h2>
                <div class="demo-buttons">
                    <button onclick="testApi()">测试API</button>
                    <button onclick="testImage()">加载图片</button>
                    <button onclick="testCache()">测试缓存</button>
                    <button onclick="clearCache()">清空缓存</button>
                </div>
                <div id="result"></div>
            </section>
            
            <section class="stats">
                <h2>📊 服务统计</h2>
                <div id="stats">
                    <p>点击"测试缓存"按钮查看统计信息</p>
                </div>
            </section>
        </main>
        
        <footer>
            <p>Powered by Vert.cj - 仓颉语言Web框架</p>
        </footer>
    </div>
    
    <script src="/app.js"></script>
</body>
</html>
        